<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html">
<link rel="import" href="../../bower_components/iron-icons/editor-icons.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">

<link rel="import" href="../../elements/som-input-styles.html">

<link rel="import" href="../../elements/som-extension-build-failure/som-extension-build-failure.html">
<link rel="import" href="../../elements/som-alert-type-behavior.html">
<link rel="import" href="../../elements/som-linkify-behavior.html">
<link rel="import" href="../../elements/som-time-behavior.html">

<script src="../../bower_components/moment/min/moment.min.js"></script>
<script src="../../bower_components/moment-timezone/builds/moment-timezone-with-data.min.js"></script>

<dom-module id="som-alert-item">
  <template>
    <style include="som-input-styles">
      paper-input {
        display: inline-block;
      }
     .alert-controls {
       display: flex;
       flex-direction: row;
       align-items: center;
       min-width: 280px;
       max-width: 400px;
       padding: 1em 4px;
       max-height: 200px;
       flex-grow: 0;
       flex-shrink: 0;
     }
     .alert-controls-links {
       padding: 0 8px;
       display: flex;
       flex-direction: column;
       text-align: center;
     }
     .alert-controls-links a,
     .alert-controls-links .link {
       padding: 8px;
       cursor: pointer;
     }
     .alert-controls-buttons {
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: flex-start;
       flex-wrap: wrap;
     }
     .alert-controls-buttons button {
       min-width: 80px;
       font-size: 0.9em;
     }
     .alert-controls-buttons button iron-icon {
       color: #aaa;
     }
     .alert-expanded {
       border-top: 1px dotted #ddd;
       color: #666;
       display: flex;
       flex-direction: row;
     }
     .alert-info {
       padding-top: 0.5em;
       padding-right: 16px;
       flex-grow: 1;
     }
     .alert-link {
       padding-left: 4px;
     }
     .alert-title {
       display: flex;
       flex-direction: row;
       align-items: center;
       font-weight: bold;
       padding: 0 8px;
       font-size: 14px;
     }
     .alert-title-bar {
       padding-top: 0.5em;
       padding-bottom: 0.25em;
       position: relative;
       display: flex;
       align-items: center;
       flex-direction: row;
       justify-content: space-between;
     }
     .alert-title-bar:hover {
       cursor: pointer;
     }
     .alert-title-section {
       display: flex;
       flex-direction: row;
     }
     .comments-link-highlighted {
       color: #ff8c00;
     }
     .no-toggle {
       cursor: default;
     }
     .dimmed {
       opacity: 0.5;
     }
     .sub-alert-list {
       font-size: 0.8em;
       max-height: 80px;
       overflow-y: auto;
       margin: 0.5em 0;
     }
     .sub-alert-list paper-radio-button {
       --paper-radio-button-size: 12px;
       padding: 4px;
     }
     #alertTimes {
       color: #666;
       min-width: 150px;
       font-size: smaller;
     }
     #expandTip {
       color: #a9a9a9;
       padding-right: 16px;
       font-size: smaller;
     }
     #bugsList .bug {
       font-size: 0.8em;
       background: #eee;
       border-radius: 16px;
       padding: 1px 2px 1px 4px;
       display: inline-block;
       margin: 0 2px;
       white-space: nowrap;
       overflow: hidden;
     }
     #bugsList iron-icon {
       color: #666;
       padding: 0;
       margin: 0 2px;
       height: 16px;
       width: 16px;
       -webkit-transition: all .3s ease;
       transition: all .3s ease;
       border-radius: 50%;
     }
     #bugsList iron-icon:hover {
       color: #222;
       background-color: #aaa;
     }
     #bugsList,
     #handleLink {
       margin-left: 16px;
     }
     #groupID {
       font-size: 0.8em;
       background: #eee;
       border-radius: 16px;
       padding: 1px 2px 1px 4px;
       display: inline-block;
       margin: 0 2px;
       white-space: nowrap;
       overflow: hidden;
     }
     #groupName {
       min-width: 320px;
       padding: 0 4px;

       /* This undoes the default padding for a paper-input. */
       --paper-input-container: {
         margin: -8px 0;
       };
     }
     #root {
       transition: opacity .25s;
       border-bottom: 1px solid #ddd;
       padding-bottom: 0.5em;
     }
     #usefulLinks {
       margin: .25em 0;
     }
     #allLinks {
       font-size: 8pt;
       margin: 1em;
     }
     #subAlertMenu {
       width: 500px;
     }
     @media (max-width: 800px) {
       .alert-expanded {
         flex-direction: column;
       }
       #expandTip {
         display: none;
       }
     }
    </style>
    <div id="root" class$="[[_cssClass]]">
      <div class="alert-title-bar" on-tap="_toggle">
        <div class="alert-title-section">
          <div class="alert-title">
            <input id="checkbox" type="checkbox"
              hidden$="[[examining]]"
              class="no-toggle"
              checked="{{checked::change}}"
              title="Select alerts to apply annotation changes to multiple alerts at once." />
            <span id="resolvedTitle" hidden$="[[!alert.resolved]]">Resolved:&nbsp;</span>
            <template is="dom-if" if="[[_hasUngroup]]">
              <iron-a11y-keys target="[[_groupNameInput]]" keys="enter" on-keys-pressed="_updateGroupName"></iron-a11y-keys>
              Group:
              <!--
                The size property controls how large the <input> tag is. It appears to
                pretty much ignore width settings, annoyingly. 100 seems to be a good
                number which allows users to see fairly large group names, but it
                might need to be tuned later. Units are characters, roughly.

                no-label-float removes some top padding that's there in case a label gets added.
                We aren't using one though, so just remove it.
              -->
              <paper-input id="groupName" no-label-float value="[[alert.title]]" class="no-toggle" on-focused-changed="_updateGroupName" size=100>
              </paper-input>
              ([[alert.alerts.length]] alerts)
            </template>
            <template is="dom-if" if="[[!_hasUngroup]]">
              <span id="snoozeTitle" hidden$="[[!annotation.snoozed]]">Snoozed ([[_snoozeTimeLeft]]): </span>
              <span id="alertTitle">[[alert.title]]</span>
            </template>
            <div id="handleLink" hidden$="[[!_helpLinkForAlert(alert)]]">
              (<a href$="[[_helpLinkForAlert(alert)]]" target="_blank">Help?</a>)
            </div>
          </div>
          <div id="bugsList" hidden$="[[!_bugs.length]]" class="alert-links">
            <template is="dom-repeat" items="[[_bugs]]" as="bug">
              <div class="bug no-toggle">
                <a target="_blank" href="https://crbug.com/[[bug.id]]">Bug [[bug.id]]</a>
                [[bug.summary]]
                <em class="bug-status" hidden$="[[!bug.status]]">([[bug.status]])</em>
                <iron-icon icon="close" title="Remove" id="remove[[index]]" on-tap="_removeBug"></iron-icon>
              </div>
            </template>
          </div>
        </div>
        <div class="alert-title-section">
          <span id="expandTip">
            Click to expand
          </span>
          <div id="alertTimes">
            [[_duration]]
          </div>
        </div>
      </div>
      <iron-collapse opened="[[!_isCollapsed]]" no-animation class="alert-expanded">
        <div class="alert-controls">
          <div class="alert-controls-links">
            <a href$="[[treeName]]/examine/[[alert.key]]"
              hidden$="[[examining]]">Examine</a>
            <a href$="[[treeName]]" hidden$="[[!examining]]">[[treeName]]</a>
            <span class$="link [[_commentsClass]]" on-tap="_comment" id="commentsLink"
              title="Comment on this alert to leave notes for others.">
              <iron-icon icon="question-answer"></iron-icon> ([[_numComments]])
            </span>
          </div>
          <div class="alert-controls-buttons">
            <button id="linkBug" on-tap="_linkBug" alt="Link a bug"
              title="Link a bug to this alert to mark causes and followup.">
              <iron-icon class="link-bug-icon" icon="link"></iron-icon>
              Link Bug
            </button>
            <button id="fileBug" on-tap="_fileBug" alt="File a bug"
              title="File a new bug and link to this alert to mark causes and followup.">
              <iron-icon class="file-bug-icon" icon="bug-report"></iron-icon>
              File Bug
            </button>
            <template is="dom-if" if="[[!annotation.snoozed]]">
              <button id="snooze" on-tap="_snooze"
                title="Snooze this alert to temporarily move it out of view.">
                <iron-icon class="snooze-icon" icon="alarm-off"></iron-icon>
                Snooze
              </button>
            </template>
            <template is="dom-if" if="[[annotation.snoozed]]">
              <button id="unsnooze" on-tap="_snooze"
                title="Unsnooze this alert to bring it back into view.">
                <iron-icon class="unsnooze-icon" icon="alarm"></iron-icon>
                Unsnooze
              </button>
            </template>
            <template is="dom-if" if="[[_hasUngroup]]">
              <button id="ungroup" on-tap="_ungroup" alt="Ungroup"
                title="Ungroup this group to split it up into separate alerts.">
                <iron-icon class="ungroup-icon" icon="close"></iron-icon>
                Ungroup
              </button>
            </template>
            <template is="dom-if" if="[[_hasResolve]]">
              <button id="resolve" on-tap="_resolve" alt="Resolve"
                title="Resolving this alert will remove it from the view.">
                <iron-icon class="ungroup-icon" icon="check"></iron-icon>
                Resolve
              </button>
            </template>
            <template is="dom-if" if="[[_hasUnresolve]]">
              <button id="unresolve" on-tap="_unresolve" alt="Unresolve"
                title="Unresolving this alert will return it to the view.">
                Unresolve
              </button>
            </template>
          </div>
        </div>
        <div class="alert-info">
          <template is="dom-if" if="[[_haveSubAlerts(alert)]]">
            <paper-radio-group class="sub-alert-list" attr-for-selected="value" selected="{{selectedAlert}}">
              <paper-radio-button value="">
                Merged alert view
              </paper-radio-button>
              <template is="dom-repeat" items="[[alert.alerts]]" as="subalert">
                <paper-radio-button value="[[subalert.key]]">
                  [[subalert.title]]
                </paper-radio-button>
              </template>
            </paper-radio-group>
          </template>
          <div id="usefulLinks" hidden$="[[!_haveLinks(selectedAlert, alert)]]">
            Useful Links:
            <template is="dom-repeat" items="[[_getImportantLinks(selectedAlert, alert)]]" as="link">
              <a class="alert-link" target="_blank" href$="[[_linkify(linkStyle, link.href)]]">[[link.title]]</a>
            </template>
            <template is="dom-if" if="[[_haveOtherLinks(selectedAlert, alert)]]">
              <div id="allLinks">
                All links:
                <template is="dom-repeat" items="[[_getLinks(selectedAlert, alert)]]" as="link">
                  <a class="alert-link" target="_blank" href$="[[_linkify(linkStyle, link.href)]]">[[link.title]]</a>
                </template>
              </div>
            </template>
          </div>
          <som-extension-build-failure tree="[[treeName]]" type="[[alert.type]]" extension="[[_getExtension(selectedAlert, alert)]]" link-style="[[linkStyle]]"></som-extension-build-failure>
        </div>
      </iron-collapse>
    </div>
  </template>
  <script src="som-alert-item.js"></script>
</dom-module>
